<template>
<RsWrap class="sys-strategy" @resize="onResize">
    <el-table
        ref="table"
        :max-height="tableHeight"
        :height="tableHeight"
        :data="strategyList"
        border
        size="small"
        highlight-current-row
        style="width: 100%"
        @cell-click="onCellClick"
        @cell-dblclick="onCellDbClick"
        @row-click="onRowClick">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="mc" label="安全策略项" width="300"></el-table-column>
            <el-table-column label="一级策略" width="100">
                <el-table-column class-name="btn-column" prop="l1" :formatter="cellFormatter">
                    <template slot="header" slot-scope="scope">
                        <el-button size="mini" icon="rs-icon-add-circle-fill" @click="onStart(scope)">{{getHeaderBtnText(scope)}}</el-button>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="二级策略" width="100">
                <el-table-column class-name="btn-column" prop="l2" :formatter="cellFormatter">
                    <template slot="header" slot-scope="scope">
                        <el-button size="mini" icon="rs-icon-add-circle-fill" @click="onStart(scope)">{{getHeaderBtnText(scope)}}</el-button>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="三级策略" width="100">
                <el-table-column class-name="btn-column" prop="l3" :formatter="cellFormatter">
                    <template slot="header" slot-scope="scope">
                        <el-button size="mini" icon="rs-icon-add-circle-fill" @click="onStart(scope)">{{getHeaderBtnText(scope)}}</el-button>
                    </template>
                </el-table-column>
            </el-table-column>
            <el-table-column label="自定义策略" width="150">
                <el-table-column class-name="btn-column" prop="l0">
                    <template slot="header" slot-scope="scope">
                        <el-button size="mini" icon="rs-icon-add-circle-fill" @click="onStart(scope)">{{getHeaderBtnText(scope)}}</el-button>
                    </template>
                    <template slot-scope="scope">
                        <ColumnSlot v-if="clickRow && clickRow.bh==scope.row.bh" :render="renderCell" :data="scope"></ColumnSlot>
                        <template v-else>{{cellFormatter(scope.row,scope.column,scope.row.l0,scope.$index)}}</template>
                    </template>
                </el-table-column>
            </el-table-column>
    </el-table>
</RsWrap>
</template>
<script>
import tips from '../../mixin/tips'
import strategy from '@/api/strategy'
var ColumnSlot = {
    //functional: true,
    props: {
        data: Object,
        render: Function
    },
    render(){
        const { data,render} = this;
        //console.log(this)
        return render(data.row,data.column,data.$index);
    }
}
export default {
    name:'StrategyPage',
    components:{ColumnSlot},
    mixins:[tips],
    data(){
        return {
            tableHeight:0,
            strategy:{},
            strategyList:[],
            clickRow:null,
            editValue:''
        }
    },
    created(){
        this.loadStrategy();
    },
    methods:{
        onResize(obj){
            this.tableHeight = obj.height;
        },
        onEdit(){
            this.$refs.form.show(this.strategy[3].clList)
            .then((action)=>{
                if( action === 'ok'){
                    this.loadStrategy();
                }
            });
        },
        onStart(obj){
            
            const data = {
                clzt:this.strategy[obj.$index].clzt===0?1:0
            }
            switch(obj.column.property){
                case 'l1':data.clbh="level1";break;
                case 'l2':data.clbh="level2";break;
                case 'l3':data.clbh="level3";break;
                case 'l0':data.clbh="level";break;
            }

            this.loading = true;
           
            strategy.saveStrategyZt(data)
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    this.loadStrategy();
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
            
        },
        onRowClick(){

        },
        onCellClick(row, column, cell, event){

            if( (this.clickRow && this.clickRow.bh !== row.bh) || column.property !== 'l0' ){
                this.clickRow = null;
            }
        },
        onCellDbClick(row, column, cell, event){

            if( column.property === 'l0'){
                //console.log(row.bh)
                this.clickRow = row;
                this.editValue = row.l0; 
            }else{
                this.clickRow = null;
            }
        },
        renderCell(row,column,$index){
            //console.log(arguments)
            const c = []
            switch( row.bh ){
                case "FIRST_MODIFY_PASSWORD":
                case "IS_AUTO_ENABLE":
                case "LOGIN_CHECK":
                case "IS_KICK_SESSION":
                case 'SESSION_CONTROL':{
                    c.push(
                        <el-select size="mini" value={this.editValue} on-input={(value)=>{this.editValue=value;}} style="width:100%;">
                            <el-option label="no" value="0"></el-option>
                            <el-option label="yes" value="1"></el-option>
                        </el-select>
                    )
                }
                break;
                case "PASSWORD_LEVEL":{
                    c.push(
                        <el-select size="mini" value={this.editValue} on-input={(value)=>{this.editValue=value;}} style="width:100%;">
                            <el-option label="弱" value="0"></el-option>
                            <el-option label="中" value="1"></el-option>
                            <el-option label="强" value="2"></el-option>
                        </el-select>
                    )
                }
                break;
                default:{
                    c.push(<el-input size="mini" value={this.editValue} on-input={(value)=>{this.editValue=value;}}></el-input>)
                }
            }
            c.push(<el-button size="mini" icon="rs-icon-add-circle-fill" on-click={()=>this.onSaveStrategy(row)}>保存</el-button>)
            return (
                <div class="cell-edit">{c}</div>
            )
        },
        onSaveStrategy(row){

            this.loading = true;
            
            strategy.saveStrategy({
                    clbh:'level',
                    msbh:row.bh,
                    tmz:this.editValue
                })
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    this.clickRow = null;
                    this.loadStrategy();
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        },
        cellFormatter(row, column, cellValue, index){
            //console.log(row.bh)
            switch( row.bh ){
                case "FIRST_MODIFY_PASSWORD":
                case "IS_AUTO_ENABLE":
                case "LOGIN_CHECK":
                case "IS_KICK_SESSION":
                case 'SESSION_CONTROL':{
                    return cellValue === '1'?'yes':'no'
                }
                case "PASSWORD_LEVEL":{
                    switch(cellValue){
                        case "0":return "弱"
                        case "1":return "中"
                        case "2":return "强"
                    }
                }
            }
            return cellValue;
        },
        getHeaderBtnText(obj){
            //console.log(obj)
            if( this.strategy.length == 4 ){
                const item = this.strategy[obj.$index];
                return item.clzt === 0 ?'停用':'启用';
            }
            return "启用";
        },
        loadStrategy(){
            this.loading = true;
            
            strategy.queryStrategy()
            .then(response => {
                this.loading = false;
                const { data } = response;
                if( data.error_code == 0 ){
                    //console.log(data.list)
                    this.constructStrategy(data.list);
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
                this.loading = false;
            });
        },
        constructStrategy(list){

            this.strategy = list;
            const result = []

            for( var i = 0; i < this.strategy[0].clList.length; i ++ ){
                result.push({
                    bh:this.strategy[0].clList[i].msbh,
                    mc:this.strategy[0].clList[i].msmc,
                    l0:this.strategy[3].clList[i].tmz,
                    l1:this.strategy[0].clList[i].tmz,
                    l2:this.strategy[1].clList[i].tmz,
                    l3:this.strategy[2].clList[i].tmz
                })
            }
            this.strategyList = result;
            //console.log(result)
        }
    }
}
</script>